<template>
  <view class="activity-section">
    <view class="section-header">
      <text class="title">精选活动</text>
      <view class="more" @click="onMoreClick">
        <text>更多</text>
        <u-icon name="arrow-right" size="12"></u-icon>
      </view>
    </view>
    <view class="activity-content">
      <image src="/static/home/activity_bar.jpg" class="activity-image" mode="widthFix"></image>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ActivitySection',
  methods: {
    onMoreClick() {
      this.$emit('more')
    }
  }
}
</script>

<style lang="scss" scoped>
.activity-section {
  margin: 0 20rpx 20rpx;
  margin-bottom: 30rpx;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    .title {
      font-size: 30rpx;
      color: #333;
    }
    
    .more {
      display: flex;
      align-items: center;
      
      text {
        font-size: 24rpx;
        color: #666;
        margin-right: 4rpx;
      }
    }
  }
  
  .activity-content {
    .activity-image {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 8rpx;
    }
  }
}
</style>